<style scoped>
    .Top{
        margin-top: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .Toleft{
        height: 60px;
        width: 60px;
    }
    .Mid{
        height: 200px;
        width: 200px;
    }
    .Toright{
        height: 60px;
        width: 60px;
    }
    .Right{
        margin-left: 30px;
    }
    .Left{
        margin-right: 30px;
    }
</style>
<template>
<div :class="TopContent">
    <div v-if="Idex>0"><button :class='Left' v-on:click="Idex--"><img src="./Arrowheadleft.png":class="Toleft"></button></div>
    <div><img v-bind:src="imgList1[Idex]" v-bind:class="Mid"></div>
    <div v-if="Idex<imgList.length"><button :class='Right' v-on:click="Idex++"><img src="./Arrowheadright.png" :class="Toright"></button></div>
</div>
</template>
<script setup>
	const imgList = [
		'https://cxk-1305128831.cos.ap-beijing.myqcloud.com/11-00.gif',
		'https://cxk-1305128831.cos.ap-beijing.myqcloud.com/11-01.gif',
		'https://cxk-1305128831.cos.ap-beijing.myqcloud.com/11-02.gif',
		'https://cxk-1305128831.cos.ap-beijing.myqcloud.com/11-03.gif',
		'https://cxk-1305128831.cos.ap-beijing.myqcloud.com/11-04.png',
		'https://cxk-1305128831.cos.ap-beijing.myqcloud.com/11-05.png'
	]
    const imgList1 = ['../public/01.png','../public/02.png',
                    '../public/03.png','../public/04.png',
                    '../public/05.png','../public/06.png',
                    '../public/07.png']
    import { RENDER_LIST } from '@vue/compiler-core'
    import {ref} from 'vue'
    let TopContent=ref("Top")
    let Toleft=ref("Toleft")
    let Mid=ref('Mid')
    let Toright=ref('Toright')
    let Left=ref('Left')
    let Right=ref('Right')    
    let Idex=ref(0)
</script>
